<template>
  <div class="page-wrapper">
    <div class="content">
      <el-col :span="4" style="text-align: center;height: 50px">
        <span style="margin-top: 20px;font-size: 25px;font-family: 幼圆">已发布作业</span>
      </el-col>
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          border>
        <el-table-column prop="num" label="作业号"></el-table-column>
        <el-table-column prop="name" label="作业名"></el-table-column>
        <el-table-column prop="status" label="作业状态"></el-table-column>
        <el-table-column prop="starttime" label="开始时间"></el-table-column>
        <el-table-column prop="endtime" label="结束时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
          <el-dropdown>
          <el-button type="success">
            作业操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="EndHomework(scope.row)">截止作业</el-dropdown-item>
              <router-link to="/Teacher/HomeworkCharts"><el-dropdown-item>查看完成情况</el-dropdown-item></router-link>
              <el-dropdown-item @click="Detail(scope.row)">批改作业</el-dropdown-item>
            </el-dropdown-menu>
          </template>
          </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
            background
            layout="prev, pager, next"
            :total="this.total"
            :page-size="this.page.pageSize">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue'
import axios from "axios";
  export default {
    name:'EnterHomework',
    components:{
      ArrowDown
    },
    methods: {
      load(){
        axios.post('/api/task/GetPublishedTask',this.page).then(res=>{
          console.log(res);
          this.total =  res.data.data.total
          this.tableData = res.data.data.list
          for (let i = 0; i < this.tableData.length; i++) {
            if(this.tableData[i].status === 1 ){
              this.tableData[i].status = '已发放'
            }
            else {
              this.tableData[i].status = '已截止'
            }
          }
        }).catch(error=>{
          console.log(error);
        })
      },
      tableRowClassName({row, rowIndex}) {
        console.log(row.status);
        if (row.status === '已截止') {
          return 'warning-row';
        } else if (row.status === '已发放') {
          return 'success-row';
        }
        return '';
      },
      Detail(scope){
        console.log(scope);
        this.$router.push({name:'ViewHwDetail',params:{TaskNum:scope.num}});
      },
      EndHomework(scope){
        axios.get('/api/task/EndTask',{params:{taskNum:scope.num}}).then(res=>{
          this.$message.success("删除成功")
          this.load()
        }).catch(error=>{

        })
      }
    },
    data() {
      return {
        tableData: [],
        page:{pageNum:1,pageSize:10,query:0},
        total:undefined
      }
    },
    created() {
      this.load()
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-table-column{
    width: 10%;
  }

  .el-pagination{
    text-align:center;
    margin-top:50px;
    margin-left: 35%;
  }
</style>